<template>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span style="font-weight:bold;font-size:25px">{{ title }}</span>
        </div>

        <el-row class="table_header">
            <!-- 输入查询 -->
            <div v-if="search_box_visibale && user_local !== 'list' && user_local !== 'administrator'" style="width:100vw">
                <el-row class="header_row">
                    <el-col :span="3" style="line-height:40px;">
                        {{ user_local === 'car' ? '车牌号：' : title.substring(0, title.length - 2) + '名：' }}
                    </el-col>
                    <el-col :span="5">
                        <el-input v-model="search_input" size="medium"></el-input>
                    </el-col>
                    <el-col :span="11" style="margin-left:5px">
                        <el-button type="primary" @click="search" icon="el-icon-search" size="medium"
                            :disabled="search_input == ''">查询</el-button>
                    </el-col>
                    <el-col :span="5">
                    </el-col>
                </el-row>
            </div>

            <!-- 筛选 -->
            <div v-else-if="user_local !== 'list' && user_local !== 'administrator'" style="width:100vw">
                <el-row class="header_row">
                    <el-col :span="2" style="line-height:40px;font-weight:bold">
                        筛选
                    </el-col>
                    <el-col :span="22">
                        <el-radio-group v-if="user_local === 'warning_msg'" v-model="filter_res" size="medium"
                            @input="() => $emit('filter_first', filter_res)">
                            <el-radio-button v-for="item in warning_checkbox_item" :label="item" :key="item">{{ item
                            }}</el-radio-button>
                        </el-radio-group>
                        <el-radio-group v-else-if="user_local === 'complaints'" v-model="filter_res" size="medium"
                            @input="() => $emit('filter_three', filter_res)">
                            <el-radio-button v-for="item in complaints_check_item" :label="item" :key="item">{{ item
                            }}</el-radio-button>
                        </el-radio-group>
                        <el-radio-group v-else v-model="filter_res" size="medium"
                            @input="() => $emit('filter_second', filter_res)">
                            <el-radio-button v-for="item in checkbox_item" :label="item" :key="item">{{ item
                            }}</el-radio-button>
                        </el-radio-group>
                    </el-col>
                </el-row>
            </div>

            <!-- 选择企业 -->

            <div v-else-if="user_local === 'administrator'" style="width:100vw">
                <el-row class="header_row">
                    <el-col :span="2" style="line-height:40px;">
                        企业名:
                    </el-col>
                    <el-col :span="6">
                        <el-select v-model="enterprise_id" placeholder="请选择企业名" size="medium">
                            <el-option v-for="item in enterprise_options" :key="item.id" :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="11" style="margin-left:5px">
                        <el-button type="primary" @click="search" icon="el-icon-search" size="medium">查询</el-button>
                    </el-col>
                    <el-col :span="5">
                    </el-col>
                </el-row>
            </div>

            <!-- 增加数据按钮 -->
            <el-button type="success" class="add_btn" @click="add" icon="el-icon-circle-plus-outline"
                v-if="add_btn_visible && user_local !== 'list' && user_local !== 'on_duty_tour_guide'"
                size="medium">新增</el-button>
        </el-row>
        <!-- 主体数据区域 -->
        <el-table :data="data.length === 0 ? table_data : data" border stripe empty-text="暂无数据" fit
            :default-sort="{ prop: 'send_time', order: 'descending' }" class="table_body" v-loading="loading">
            <el-table-column label="序号" width="50" align="center">
                <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column v-for="item in table_item" :key="item.id" :prop="item.key" :label="item.value" resizable
                show-overflow-tooltip :width="item.width" align="center"
                :sortable="item.key === 'send_time' || item.key === 'star' || (item.key === 'name' && user_local === 'tour_guide_application') ? true : false">
            </el-table-column>
            <el-table-column v-if="user_local === 'tour_guide_application'" label="状态" align="center">
                <template slot-scope="scope">
                    {{ scope.row.if_succeed === '0' ? '未处理' : (scope.row.if_succeed === '1' ?
                        '已通过' : '未通过')
                    }}
                </template>
            </el-table-column>
            <el-table-column v-if="user_local === 'complaints'" label="状态" align="center">
                <template slot-scope="scope">
                    {{ scope.row.if_coped === '0' ? '未处理' : '已处理' }}
                </template>
            </el-table-column>

            <el-table-column v-if="user_local === 'warning_msg'" label="状态" align="center">
                <template slot-scope="scope">
                    {{ scope.row.need_cope === '0' ? '待审批' : (scope.row.need_cope === '1' ?
                        '无需处理' : (scope.row.need_cope === '3' ? '已处理' : '处理中'))
                    }}
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150" align="center" v-if="oper_visible">
                <!-- 风景区、酒店 -->
                <template slot-scope="scope">
                    <!-- 查看导游按钮只在旅行社可见 -->
                    <el-button v-if="user_local === 'travel_agency' && user_local !== 'list'" @click="get_guide(scope.row)"
                        type="success" size="mini" style="padding:5px">导游</el-button>
                    <!-- 修改按钮在 警告\申请\投诉 不可见 -->
                    <el-button
                        v-if="user_local !== 'warning_msg' && user_local !== 'tour_guide_application' && user_local !== 'complaints' && user_local !== 'list'"
                        @click="add_dialog_visible(scope.row)" type="primary" size="mini" style="padding:5px">修改</el-button>
                    <!-- 处理按钮在 投诉\告警 可见 -->
                    <el-button v-else-if="user_local !== 'list'" @click="show_deal_with(scope.row)" type="primary"
                        size="mini" style="padding:5px">处理</el-button>

                    <el-button v-if="user_local !== 'list'" @click="show_delete(scope.row)" type="danger" size="mini"
                        style="padding:5px">删除</el-button>

                    <el-button v-if="user_local == 'list'"
                        @click="() => $router.push({ path: '/user/itinerary_detail', query: { itinerary_id: scope.row.i_id, title: '旅行单详情' } })"
                        type="primary" size="mini" style="padding:5px">查看</el-button>
                    <el-button v-if="user_local == 'list'" @click="add_dialog_visible(scope.row)" type="success" size="mini"
                        style="padding:5px">申领</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页栏 -->
        <el-pagination v-if="user_local !== 'list'" align='right' @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[1, 5, 10, 20]"
            :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>

        <!-- 确认删除弹窗 -->
        <el-dialog title="提示" :visible.sync="delete_box_visible" width="20%" center top="30vh">
            <p>确定删除吗？</p>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delete_box_visible = false">取 消</el-button>
                <el-button type="danger" @click="delete_row">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 处理投诉框,审批 -->
        <el-dialog title="审批"
            v-if="(user_local === 'complaints' || user_local === 'warning_msg' || user_local === 'tour_guide_application') && deal_with_dialog_visible"
            :visible.sync="deal_with_dialog_visible" :width="width" center>
            <el-card v-if="user_local === 'complaints' || user_local === 'warning_msg'">
                <div slot="header">
                    <h3>{{ deal_with_item.title }}</h3>
                    <span style="font-size:5px; color:rgb(122, 122, 122)">时间：{{ deal_with_item.send_time
                    }} | 发送者：{{ deal_with_item.sender }}</span>
                    <el-tag v-if="user_local === 'complaints'" style="float: right;" type="success">投诉对象：{{
                        deal_with_item.enterprise }}</el-tag>
                </div>
                <p>{{ deal_with_item.content }}</p>
            </el-card>

            <el-card v-if="user_local === 'tour_guide_application' && deal_with_dialog_visible">
                <Description :deal_with_item="deal_with_item" />
            </el-card>

            <span slot="footer" class="dialog-footer">
                <el-button @click="deal_with_dialog_visible = false" size="medium">取 消</el-button>
                <el-button type="warning" @click="deal_with_row('0')" size="medium">不通过</el-button>
                <el-button type="success" @click="deal_with_row('1')" size="medium">通 过</el-button>
            </span>
        </el-dialog>

        <!-- 显示在岗导游框 -->
        <el-dialog title="在岗导游" v-if="user_local === 'travel_agency' && on_duty_guide_dialog_visible"
            :visible.sync="on_duty_guide_dialog_visible" width="50%" center>
            <el-table :data="on_duty_guide_data" border stripe empty-text="暂无数据" fit height="500px">
                <el-table-column label="序号" width="50" align="center">
                    <template slot-scope="scope">
                        {{ (scope.$index + 1) }}
                        <!-- {{ (scope.$index + 1) + (currentPage - 1) * pageSize }} -->
                    </template>
                </el-table-column>
                <el-table-column v-for="item in on_duty_guide_table_item" :key="item.id" :prop="item.key"
                    :label="item.value" resizable show-overflow-tooltip :width="item.width" align="center">
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="on_duty_guide_dialog_visible = false" size="medium">关 闭</el-button>
            </span>
        </el-dialog>

    </el-card>
</template>


<script lang="js">
import Description from '@/components/reusable_components/description.vue'
export default {
    name: 'TableCard',

    components: {
        Description
    },
    props: {
        title: {
            type: String,
            default: '',
        },

        total: {
            type: Number,
            default: 0
        },

        user: {
            type: String,
            default: ''
        },

        table_item: {
            type: Array,
            default: null
        },

        table_data: {
            type: Array,
            default: null,
        },

        search_box_visibale: {
            type: Boolean,
            default: true
        },

        add_box_visible: {
            type: Boolean,
            default: false
        },

        add_btn_visible: {
            type: Boolean,
            default: true
        },

        oper_visible: {
            type: Boolean,
            default: true
        },

        loading: {
            type: Boolean,
            default: true
        }
    },


    data() {
        return {
            currentPage: 1, // 当前页码
            pageSize: 10, // 每页的数据条数
            data: [],
            search_input: '',
            filter_res: '不限',

            checkbox_item: ['不限', '待审批', '已通过', '未通过'],
            complaints_check_item: ['不限', '未处理', '已处理'],
            warning_checkbox_item: ['不限', '待审批', '无需处理', '处理中', '处理完成'],
            is_add_dialog_visible: false,
            user_local: '',// 调用此组件的组件
            delete_box_visible: false, // 控制“确认删除”是否显示
            delete_target: null, // 存储需要删除的对象信息
            deal_with_dialog_visible: false, // 控制“处理对话”是否显示
            deal_with_target: null, // 需要处理的目标
            deal_with_item: null, // 需要处理的对象，申请审批对话框使用
            on_duty_guide_dialog_visible: false, // 控制“在岗导游对话框”显示
            on_duty_guide_data: [],// 存储在岗导游数据
            on_duty_guide_table_item: [
                { key: 'name', value: '姓名', },
                { key: 'gender', width: '50px', value: '性别', },
                { key: 'information', value: '导游证', },
                { key: 'phone', value: '联系方式', },
            ],

            enterprise_options: [],
            enterprise_id: null,
        }
    },

    computed: {
        width() {
            return this.user_local === 'tour_guide_application' ? '50%' : '30%'
        }
    },
    mounted() {
        this.get_all_enterprise()
        this.data = this.table_data

    },
    created() {
        this.data = this.table_data;
        this.currentPage = 1;
        this.pageSize = 10;
        this.user_local = this.user
    },

    methods: {
        // 捕捉分页大小变化
        handleSizeChange(val) {
            this.currentPage = 1;
            this.pageSize = val;
            this.$emit("currentPage", this.currentPage)
            this.$emit("SizeChange", val)
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.$emit("SizeChange", this.pageSize)
            this.$emit("currentPage", val)
        },

        async get_all_enterprise() {
            try {
                const res = await this.$http.get("/selectAllTourismEnterprise", {// 这个路径也可以根据父组件传过来的user定
                    // 携带数据
                    name: this.search_input
                });
                this.enterprise_options = res.data.data
            } catch (error) {
            }
        },


        // 查询
        async search() {
            let url = ''
            switch (this.user_local) {
                case 'scenic_spot':
                case 'hotel':
                case 'travel_agency':
                    url = '/findTourismEnterpriseByName'
                    break;
                case 'administrator':
                    url = '/findAdministratorByAffiliatedEnterprise'
                    break;
                case 'car':
                    url = '/findRescueVehicleByLicenseNumber'
                    break
                case 'on_duty_tour_guide':
                    url = '/findGuideVaguely'
                    break
                default:
                    break;
            }
            if (this.user_local == 'administrator' || this.user_local == 'car' || this.user_local === 'on_duty_tour_guide') {
                try {
                    const res = await this.$http.post(url, {
                        // 携带数据
                        affiliated_enterprise: this.enterprise_id,
                        license_number: this.search_input,
                        str: this.search_input
                    });
                    this.data = []
                    if (res.data.data === null)
                        this.data = []
                    else if (this.user_local === 'car') {
                        this.data = []
                        this.data.push(res.data.data)
                    }
                    this.data = res.data.data
                } catch (error) {
                }
            } else {
                try {
                    const res = await this.$http.get(url, {// 这个路径也可以根据父组件传过来的user定
                        // 携带数据
                        params: {
                            name: this.search_input
                        }
                    });
                    this.data = []
                    this.data.push(res.data.data)
                } catch (error) {
                }
            }
        },
        // 通知父组件是否开启对话框
        add_dialog_visible(row) {
            this.$emit("is_add_dialog_visible", true)
            this.$emit("row_id", row.id)
            this.$emit("row_index", row.i_id)
        },

        add() {
            this.$emit("is_add_dialog_visible", true)
            this.$emit("add", true)
        },

        // 显示删除框
        show_delete(row) {
            this.delete_box_visible = true
            this.delete_target = row
        },

        // 显示投诉处理框
        show_deal_with(row) {
            this.get_deal_with_item(row)
            this.deal_with_target = row
            this.deal_with_dialog_visible = true
        },

        // 获取需要处理的投诉的项目
        get_deal_with_item(row) {
            this.deal_with_item = row
        },

        async delete_row() {
            let url = ''
            switch (this.user_local) {
                case 'scenic_spot':
                case 'hotel':
                case 'travel_agency':
                    url = '/deleteTourismEnterprise'
                    break;
                case 'tour_guide_application':
                    url = '/deleteApplicationById'
                    break;
                case 'warning_msg':
                    url = '/DeleteWarningById'
                    try {
                        const res = await this.$http.post(url, {
                            // 携带数据
                            id: this.delete_target.id
                        });
                        if (res.data.code === 2000) {
                            this.$message.success('删除成功')
                            this.$router.go(0)
                        } else {
                            this.$message.error('删除失败')
                        }
                        this.delete_box_visible = false
                    } catch (error) { }
                    return
                case 'on_duty_tour_guide':
                    url = '/deleteGuideById'
                    try {
                        const res = await this.$http.delete(url, {
                            // 携带数据
                            data: {
                                id: this.delete_target.id
                            }
                        });
                        if (res.data.code === 2000) {
                            this.$message.success('删除成功')
                            this.$router.go(0)
                        } else {
                            this.$message.error('删除失败')
                        }
                        this.delete_box_visible = false
                    } catch (error) { }
                    return
                case 'complaints':
                    console.log(this.delete_target.id)
                    url = '/DeleteComplaintById'
                    try {
                        const res = await this.$http.post(url, {
                            // 携带数据
                            id: this.delete_target.id
                        });
                        if (res.data.code === 2000) {
                            this.$message.success('删除成功')
                            this.$router.go(0)
                        } else {
                            this.$message.error('删除失败')
                        }
                        this.delete_box_visible = false
                    } catch (error) { }
                    return
                default:
                    break;
            }
            try {

                const res = await this.$http.delete(url + `/${this.delete_target.id}`, { // 这里链接可以根据父组件传过来的user定
                    // 携带数据
                    data: {
                        id: this.delete_target.id
                    }
                });
                if (res.data.code === 2000) {
                    this.$message.success('删除成功')
                    this.$router.go(0)
                } else {
                    this.$message.error('删除失败')
                }
                this.delete_box_visible = false
            } catch (error) {
            }
        },

        // 处理某一行的数据
        async deal_with_row(res_) {
            let url = ''
            switch (this.user_local) {

                case 'tour_guide_application':
                    url = '/reviewApplication'
                    break;
                case 'warning_msg':
                    url = '/ReviewWarning'
                    const res = await this.$http.post('/ReviewWarning', {
                        // 携带数据
                        id: this.deal_with_item.id,
                        need_cope: 3,
                    });
                    if (res.data.code === 2000) {
                        this.$message.success('成功了')
                        this.$router.go(0)
                    } else {
                        this.$message.error('失败了')
                    }
                    // 处理成功，关闭对话框
                    this.deal_with_dialog_visible = false
                    return
                case 'complaints':
                    url = '/ReviewComplaint' // 等待填入
                    break
                default:
                    console.log(this.user_local)
                    break;
            }
            try {
                const res = await this.$http.post(url, {
                    // 携带数据
                    id: this.deal_with_item.id + '',
                    if_succeed: res_ == '0' ? '2' : '1',
                    if_coped: res_,
                    need_cope: 3,
                });
                if (res.data.code === 2000) {
                    this.$message.success('成功了')
                    this.$router.go(0)
                } else {
                    this.$message.error('失败了')
                }
                // 处理成功，关闭对话框
                this.deal_with_dialog_visible = false
            } catch (error) {
            }
        },

        // 获取导游
        async get_guide(row) {
            this.on_duty_guide_dialog_visible = true
            this.on_duty_guide_data = []
            try {
                const res = await this.$http.post("/findGuideByAgency_id", {
                    // 携带数据
                    agency_id: row.id
                });
                this.on_duty_guide_data = res.data.data
            } catch (error) {
            }
        },
    },
    watch: {
        user_local(news, olds) {
        }
    }
}
</script>

<style lang="less" scoped>
.table_header {
    display: flex;
    justify-content: space-between;

    .add_btn {
        margin-bottom: 5px;
        height: 40px
    }

    .header_row {
        margin-bottom: 5px;
        display: flex;
        justify-content: space-between;
    }
}

.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
}

.table_body {
    height: 67vh;
    overflow: auto;

    -ms-overflow-style: none;
    /* IE 10+ */

    scrollbar-width: none;
    /* Firefox */
}

.hot_box::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
}
</style>
